<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./todolist.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <h1>todos</h1>
    </header>
    <div id="box" v-cloak>
        <div class="inp">
            <span @click='all' :class='allopt?"btn_all":""'>></span><input @keyup.enter='add' type="text" v-model.lazy='inputValue' placeholder="What needs to be done?">
        </div>
        <div class="list" v-for='(item,index) in lists' @mouseover='show(index)' @mouseout='hide(index)'>
            <input type="checkbox" @click='opt(index)' v-model='item.state'>
            <label :class='item.state?"line":" "'>{{item.event}}</label>
            <span @click=' del(index) ' v-show='item.num '>×</span>
        </div>
        <div class="btn">
            <span>{{lists.length}} item left</span>
            <ul>
                <li @click='allShow' :class='border1?"bor":""'>All</li>
                <li @click='actShow' :class='border2?"bor":""'>Active</li>
                <li @click='comShow' :class='border3?"bor":""'>Completed</li>
            </ul>
            <span @click='clear'>Clear completed</span>
        </div>
    </div>
    <div class="bottom1"></div>
    <div class="bottom2"></div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#box ',
            data: {
                lists: [],
                inputValue: ' ', //输入框数据
                allopt: false, //全选按钮未选中状态
                copyLists: [], //保留原始事项
                border1: true, //按钮边框状态
                border2: false, //按钮边框状态
                border3: false, //按钮边框状态
            },
            methods: {
                add() { //添加事项
                    if (this.inputValue != " ") { //输入不能为空
                        this.lists.push({
                            event: this.inputValue,
                            state: false, //多选未选中（完成）
                            num: false, //删除按钮隐藏状态
                        });
                        this.copyLists = this.lists;
                    } else {
                        alert('输入不能为空！');
                        return false;
                    }
                    this.inputValue = ' '
                },
                del(index) { //删除事件
                    this.lists.splice(index, 1);
                    this.copyLists = this.lists;
                },
                show(index) { //删除按钮出现
                    this.lists[index].num = true
                },
                hide(index) { //删除按钮隐藏
                    this.lists[index].num = false
                },
                opt(index) { //点击多选按钮选中
                    this.lists[index].state = !this.lists[index].state;
                    this.allopt = this.lists.every(item => {
                        return item.state == true
                    });
                    this.copyLists = this.lists;
                },
                all() { //点击全选图标
                    //有一个未选中，返回true,全选图标选中。
                    this.allopt = this.lists.some(item => {
                        return item.state == false
                    });
                    this.lists.forEach(item => {
                        item.state = this.allopt;
                    });
                    this.copyLists = this.lists;
                },
                allShow() { //显示全部事项
                    this.lists = this.copyLists;
                    this.border1 = true;
                    this.border2 = false;
                    this.border3 = false
                },
                actShow() { //显示未完成事项
                    this.lists = this.copyLists.filter(item => {
                        return item.state == false;
                    })
                    this.border1 = false;
                    this.border2 = true;
                    this.border3 = false
                },
                comShow() { //显示全部完成事项
                    this.lists = this.copyLists.filter(item => {
                        return item.state == true;
                    })
                    this.border1 = false;
                    this.border2 = false
                    this.border3 = true;
                },
                clear() { //批量删除已完成
                    this.lists = this.copyLists.filter(item => {
                        return item.state == false
                    });
                    this.copyLists = this.lists;
                    this.border1 = true;
                    this.border2 = false
                    this.border3 = false;
                },
            },
        })
    </script>
</body>

</html>